<template>
  <el-container>
    <el-header>
      <el-button @click="refresh" type="primary">更新图标(重新爬取图标)</el-button>
    </el-header>
    <el-main>
      <el-card style="padding-bottom: 15px">
        <div v-for="icon in iconData" style="float: left; width: 12.5%; text-align: center;">
          <el-card style="height:0;padding-bottom:100%; margin: 1px">
            <div >
              <i :class="icon"></i>
              <span v-text="icon"></span>
            </div>
          </el-card>
        </div>
      </el-card>
<!--      <el-card>-->
<!--        <li v-for="icon in iconData" >-->
<!--          <i :class="icon"></i>-->
<!--          <span v-text="icon"></span>-->
<!--        </li>-->
<!--      </el-card>-->
      <el-pagination
        style="margin: 100px"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[24, 32, 40]"
        layout="sizes, prev, pager, next, jumper, ->, total, slot"
        :total="total">
      </el-pagination>
    </el-main>
  </el-container>
</template>

<script>
  import {postRequest} from "../../util/api";
  import {myMessage} from "../../util/myMessage";

  export default {
    name: "SysIcon",
    data() {
      return {
        iconData: [],
        pageSize: 24,
        currentPage: 1,
        total: 0,
      }
    },
    created() {
      this.query();
    },
    methods: {
      query() {
        let queryParam = {};
        queryParam.pageSize = this.pageSize;
        queryParam.currentPage = this.currentPage;
        postRequest('/system/icon/allICons', queryParam).then(res =>{
          if (res.status === 200) {
            this.iconData = res.object.data;
            this.total = res.object.total;
            console.log(res)
          } else {
            myMessage.error(res.message);
          }
        });
      },
      sizeChange(size) {
        this.pageSize = size;
        this.query();
      },
      currentChange(page) {
        this.currentPage = page;
        this.query();
      },
      refresh() {
        postRequest('/system/icon/refresh').then(resp=>{
          if (resp.status === 200) {
            this.query();
          }
        })
      }
    }
  }
</script>

<style scoped>
i {
  color: #666;
  font-size: 50px;
}

span{
  font-size: 10px;
  word-break:normal;
  width:auto;
  display:block;
  white-space:pre-wrap;
  word-wrap : break-word ;
  overflow: hidden ;
}
</style>
